<template>
    <div style="width: 600px; margin: auto;background-color: darkkhaki;">
        <h1>实例：商品导航和商品列表组件的通信</h1>
        <div style="float: left;width: 20%;">
            <!-- 商品导航组件 -->
             <GoodsNav @handle="dadHandle"/>
        </div>
        <div style="float: left;width: 80%;">
            <!-- 商品展示组件 -->
            <GoodsList :list="list"/>
        </div>
    </div>
</template>

<script>
import GoodsList from '@/components/GoodsList.vue';
import GoodsNav from '@/components/GoodsNav.vue';

export default {
    components:{
        GoodsList,
        GoodsNav
    },
    //父组件向子组件传递图片路径时，传的是绝对路径，但是如果直接使用绝对论，会加上ip和端口号，无法访问图片
    //因此在父组件向子组件传递图片路径时，加上require可以解决这个问题
    data() {
        return {
            goods:[{id:'001',cid:'1',name:'香草冰淇淋',src:require('../assets/logo.png')},
            {id:'002',cid:'1',name:'草莓冰淇淋',src:require('../assets/logo.png')},
            {id:'003',cid:'1',name:'巧克力冰淇淋',src:require('../assets/logo.png')},
            {id:'004',cid:'1',name:'蓝莓冰淇淋',src:require('../assets/logo.png')},
            {id:'005',cid:'2',name:'草莓蛋糕',src:require('../assets/logo.png')},
            {id:'006',cid:'2',name:'巧克力蛋糕',src:require('../assets/logo.png')},
            {id:'007',cid:'3',name:'哈根达斯巧克力',src:require('../assets/logo.png')},
            {id:'008',cid:'3',name:'好使巧克力',src:require('../assets/logo.png')},
            {id:'009',cid:'3',name:'德芙巧克力',src:require('../assets/logo.png')}
            ],
            list:[]
        }
    },
    mounted() {
        this.list = this.goods.slice()
    },
    methods:{
        dadHandle(val){
            this.list = this.goods.filter( v => v.cid == val)
        }
    }
}
</script>